<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Ajax异步上传文件</title>
		<script src="jquery12.js"></script>
		<script src="jquery-form.js"></script>
		<style>
			#dUpload {
				width: 82px;
				height: 32px;
				position: relative;
				overflow: hidden;
				font-family: "microsoft yahei";
			}
			/*
技巧重点：把上传文本域设置为透明色，尺寸通过调整宽高和字大小来调整
*/
			
			#dFile {
				filter: Alpha(opacity=0);
				opacity: 0.0;
				position: absolute;
				right: 0px;
				height: 32px;
				cursor: pointer;
				font-size: 16px;
			}
			/*
上传文件的背景图
*/
			
			#dFileBg {
				width: 82px;
				height: 32px;
				background-color: #00a1cc;
				color: #fff;
				font-size: 14px;
				text-align: center;
				border-radius: 5px;
				line-height: 30px;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<form id="myform" action="upload.php" method="post" enctype="multipart/form-data">
			<div id="dUpload">
				<input id="dFile" type="file" multiple name="myfile[]">

				<div id="dFileBg">确定上传</div>

			</div>
		</form>

		<div id="imgs"></div>

		<script>
			var imgs = document.getElementById("imgs");
			var ajax_option = {
				url: "upload.php",
				type: "post",
				success: function(data) {
					var arr = data.split(",");
					for(i = 0; i < arr.length - 1; i++) {
						imgs.innerHTML += "<img src='" + arr[i] + "'>";
					}
				}

			}

			$("#dFile").change(
				function() {
					$("#myform").ajaxSubmit(ajax_option);
				}
			)
		</script>
	</body>

</html>